<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/HomeTemplate.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                >
    <ui:define name="body">
        <div class="main-container" >
        <p:tabMenu id="tab1" model="#{dynamicMenu.getSimpleMenuModel(2)}" style="width: 90%"  />
        <h:form id="form" >
        <p:panel style="border-bottom: none; width: 90%" >  
             
                <h:panelGrid  columns="4" >  
                    <h:outputText value="Order No :" />  
                    <h:outputText value="OR00#{traceOrderBean.detTraceOrderBean.noOrder}" style="margin-right: 400px" />
                    <h:outputText value="Order Date :" />  
                    <h:outputText value="#{traceOrderBean.detTraceOrderBean.dateOrder}" >
                        <f:convertDateTime pattern="MM/dd/yyyy"></f:convertDateTime>
                    </h:outputText>
                    <h:outputText value="Shipment State :" />  
                    <h:outputText value="" style="margin-right: 400px" />
                    <h:outputText value="Shipment Date :" />  
                    <h:outputText value="" style="margin-right: 400px" />
                    <h:outputText value="Payment State:" />  
                    <h:outputText value="" style="margin-right: 400px" />
                    <h:outputText value="Payment Type :" />  
                    <h:outputText value="" style="margin-right: 400px" />
                    <h:outputText value="Payment Date :" />  
                    <h:outputText value="" style="margin-right: 400px" />
                    <h:outputText value="Observations:" />  
                    <h:outputText value="" style="margin-right: 400px" />
                </h:panelGrid>  
 
      </p:panel>
            <p:dataTable id="dataTable" var="detOrder" value="#{detTraceOrderBean.getDetOrders()}" widgetVar="detOrderTable" 
                         paginator="true"
                         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks}
                         {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" paginatorPosition="bottom" editable="true" editMode="cell"
                         rows="10" rowsPerPageTemplate="10,20,40"  style="width: 90%"
                         >  

                <p:column  >  
                    <f:facet name="header">  
                        GI SKU 
                    </f:facet>  

                    <h:outputText value="#{detOrder.sku}" />  

                </p:column>  
                <p:column headerText="Model Name">  
                    <h:outputText value="#{detOrder.idCatalog.modelName}" style="float: left" />  
                </p:column> 

                <p:column headerText="Model Year">  
                    <h:outputText value="#{detOrder.idCatalog.modelYear}" />  
                </p:column> 


                <p:column headerText="Size" >  
                    <h:outputText value="#{detOrder.idSize.description}" />  
                </p:column>  

                <p:column headerText="Price Unit (US)" style="text-align: center">  
                    <h:outputText value="#{detOrder.priceUnit}" style="float: right" >  
                        <f:convertNumber type="currency"  currencySymbol="" pattern="###,###"/>
                    </h:outputText>
                </p:column> 
                <p:column headerText="Quantity" >  
                    <h:outputText value="#{detOrder.quantity}" />  

                </p:column>  
                <p:column headerText="Total (US)" style="text-align: center"> 

                    <h:outputText value="#{detOrder.quantity*detOrder.priceUnit}" style="float: right" > 
                        <f:convertNumber type="currency"  currencySymbol="" pattern="###,###"/>
                    </h:outputText>

                </p:column> 

                <f:facet name="footer" >
                    <p:column colspan="6" style="text-align:right">  
                        Total Order: 
                    </p:column>
                    <p:column>  
                        <h:outputText value="#{detTraceOrderBean.totalOrder}" >  
                            <f:convertNumber type="currency"  currencySymbol="" pattern="###,###"/>
                        </h:outputText>

                    </p:column> 
                </f:facet>


            </p:dataTable> 

            <h:panelGrid columns="3"  >
                <p:commandButton value="PDF"  />
                <p:commandButton value="Back" action="#{detTraceOrderBean.back}"/>
                

            </h:panelGrid>


        </h:form>
  </div>
    </ui:define>
</ui:composition>

